<template>
  <section class="container">
    <div class="register">
      <div class="register_top">
        <div class="register_top1">
          <img src="../styles/asset/register_top1.png" alt="">
          <div class="register_top1_text">
            <span>每邀请一位好友注册</span>
            <span class="register_top1_text_right">您将获得{{ this.money[0] }}元优惠券奖励</span>
          </div>
        </div>
        <div class="register_top2">
          <img src="../styles/asset/register_top2.png" alt="">
          <div class="register_top2_text">
            <span>{{ this.money[0] }}</span>
          </div>
          <div class="register_top2_code">
            <span>您的邀请码：</span>
            <span class="register_top2_code_right">{{this.inviterPhone}}</span>
          </div>
        </div>
      </div>
      <div class="register_btm">
        <div class="register_btm_title">
          <span>邀请好友</span>
        </div>
        <div class="register_btm_left">
          <button class="btm_left_circle" @click="openFriends()"><i></i></button>
          <span>微信朋友圈</span>
        </div>
        <div class="register_btm_right">
          <button class="btm_left_friends" @click="openCircle()"><i></i></button>
          <span>微信好友</span>
        </div>
      </div>
    </div>
    <simplert  ref="simplert"></simplert>
  </section>
</template>

<script>
    import Simplert from '../../components/dialog/dialog.vue'

  var filters = {
    parseURL:function(url) {
      var a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          var ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  }

  export default {
    data() {
      return {
        inviterPhone: '',
        type: '1',
        img: require('../../activities/styles/asset/share.jpg'),
        money: []
      }
    },
    created() {

    },
    mounted() {
      const url = window.location.href;
      this.inviterPhone = filters.parseURL(url).params.inviterPhone;
      this.getInvitationMoney();
    },
    components: {
      Simplert
    },
    methods: {
      getInvitationMoney() {
        let _this = this;
        this.$api.get('/userAccount/getInviteCoupon?type=' + this.type, {}, s => {
          if (s.module === null) {
            this.open('后台尚未配置',false,'','','fade_alert',function(){});
            return false;
          }
          s.module.forEach(function(item) {
            _this.money.push(parseInt(item.deductible))
          });
        })
      },
      open (title, confirmBtn,customConfirmBtnText,onConfirm,type,onClose,message) {
        let obj = {
          title: title,
          useConfirmBtn: confirmBtn,
          customConfirmBtnText: customConfirmBtnText,
          onConfirm:onConfirm,
          type: type,
          onClose:onClose,
          message:message
        };
        this.$refs.simplert.openSimplert(obj);
      },
      openFriends() {
        //朋友圈
        let userAgentObj = navigator.userAgent;
        let root = process.env.MAIN_ROOT;
        if(userAgentObj.match(/Android/i)){
          window.control.WXSceneTimeline('六个轮子邀请注册送优惠券','好朋友给你送券来了，邀你注册六个轮子，用券免车费轻松出行更安全',root+this.img,root+'/#/app/invitationRegister?inviterPhone='+ this.inviterPhone);
        }else if(userAgentObj.match(/iPhone/i)){
          WXSceneTimeline('六个轮子邀请注册送优惠券','好朋友给你送券来了，邀你注册六个轮子，用券免车费轻松出行更安全',root+this.img,root+'/#/app/invitationRegister?inviterPhone='+ this.inviterPhone);
        }
      },
      openCircle() {
        //好友
        let userAgentObj = navigator.userAgent;
        let root = process.env.MAIN_ROOT;
        if(userAgentObj.match(/Android/i)){
          window.control.WXSceneSession('六个轮子邀请注册送优惠券','好朋友给你送券来了，邀你注册六个轮子，用券免车费轻松出行更安全',root+this.img,root+'/#/app/invitationRegister?inviterPhone='+ this.inviterPhone);
        }else if(userAgentObj.match(/iPhone/i)){
          WXSceneSession('六个轮子邀请注册送优惠券','好朋友给你送券来了，邀你注册六个轮子，用券免车费轻松出行更安全',root+this.img,root+'/#/app/invitationRegister?inviterPhone='+ this.inviterPhone);
        }
      }
    }
  }
</script>

<style scoped >
  @import "../../activities/styles/styles.css";
  body {
    background: #eeeeee;
  }
  .container {
    width: 100%;
    height: 100%;
    background: #F8F8F8;
  }
  .register {
    margin: 0 auto;
    max-width: 750px;
    /*height: 100%;*/
    display: flex;
    flex-wrap: wrap;
  }
  .register .register_top {
    /*height: 80%;*/
  }

  .register .register_top1,
  .register .register_top2,
  .register .register_btm {
    width: 100%;
  }
  .register .register_top1,
  .register .register_top2 {
    position: relative;
  }
  .register_top1_text {
    font-size: 14px;
    width: 100%;
    text-align: center;
    position: absolute;
    left:0;
    bottom:45px;
  }
  .register_top2_text {
    width: 100%;
    color: #ff3d04;
    text-align: center;
    font-size: 65px;
    position: absolute;
    left:0;
    top:15%;
    font-family: "arial";
    font-weight: bold;
  }
  @media screen and (max-width: 320px) {
    .register_top1_text {
      bottom:35px;
    }
  }
  .register_top2_code {
    width: 100%;
    color: #333333;
    text-align: center;
    font-size: 18px;
    position: absolute;
    left:0;
    bottom:45px;
  }
  .register_top2_code_right {
    border-bottom: 1px solid #333333;
  }
  .register_top1_text_right {
    color: #ff5d2e;
  }
  .register .register_top1 img,
  .register .register_top2 img {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
    border: none;
  }
  .register_btm {
    background: #f8f8f8;
    border-top: 1px solid #eeeeee;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .register_btm .register_btm_title {
    width: 100%;
    text-align: center;
    position: absolute;
    top:-0.3rem;
    left:0;
    font-size: 12px;
  }
  .register_btm_title span {
    display: inline-block;
    background-color: #f8f8f8;
    border: 1px solid #eeeeee;
    border-radius: 15px;
    font-size: 13px;
    padding: 0 0.3rem;
    line-height: 0.6rem;
    height: 0.6rem;
  }
  .register_btm .register_btm_left,
  .register_btm .register_btm_right{
    width: 100%;
    padding-top: 0.3rem;
    padding-bottom: 0.2rem;
  }
  .register_btm .register_btm_left button,
  .register_btm .register_btm_right button {
    display: block;
    margin: 0 auto;
    background: #ffffff;
    width: 50px;
    height: 50px;
    border: none;
    outline: none;
    border-radius: 50px;
    text-align: center;
  }
  .register_btm .register_btm_left span,
  .register_btm .register_btm_right span {
    display: block;
    margin-top: 5px;
    font-size: 11px;
  }
  .register_btm_left .btm_left_circle i,
  .register_btm_right .btm_left_friends i{
    display: inline-block;
    width: 25px;
    height:25px;
    margin-top: 3px;
  }
  .register_btm_left .btm_left_circle i {
    background: url('../styles/asset/wx_circle.png') no-repeat;
    background-size: cover;
  }
  .register_btm_right .btm_left_friends i {
    background: url('../styles/asset/wx_friends.png') no-repeat;
    background-size: contain;
    margin-top: 10px;
  }
</style>
